import React from 'react';
import { Collapse, Table, Row, Button } from 'antd';
import Base from '../../../components/Detail/base';
import CodeMirror from 'src/components/ScriptEditor';
import ReturnValue from '../../../components/Detail/returnValue';
import DetailCard from '../../../../components/detailCard';
import { getBaseList, getResultColumns, getParamsColumns, getMapColumns } from './option';
import '../index.less';

const InterfaceInfo = (props) => {
  const { value, isVersion } = props;

  const renderInterfaceNode = () => [
    {
      title: '基础配置',
      component: <Base value={value} />,
    },
    {
      title: '数据库设置',
      component: <DetailCard value={value.bankDatabaseConnection && getBaseList(value.bankDatabaseConnection)} />,
    },
    {
      title: 'SQL配置',
      component: <CodeMirror disabled value={value.sqlStatement} />,
    },
    {
      title: '入参定义',
      component: <Table rowKey='id' columns={getParamsColumns()} dataSource={value.params} pagination={false} />,
    },
    {
      title: '返回结果',
      component: <Table rowKey='id' columns={getResultColumns()} dataSource={value.returningMaps} pagination={false} />,
    },
    {
      title: '接口返回结果',
      component: <ReturnValue value={value} />,
    },
    {
      title: '返回参数定义-映射',
      component: <Table rowKey='id' columns={getMapColumns()} dataSource={value.returningMaps} pagination={false} />,
    },
  ];

  const handleEdit = () => {
    props.history.push(`/dataGateway/databaseInterfaceManage/${value.id}/edit`);
  };

  return (
    <div>
      <Collapse
        className='detail'
        defaultActiveKey={[0, 1, 2, 3, 4, 5, 6]}
        bordered={false}
        expandIconPosition='right'
        ghost={true}
      >
        {renderInterfaceNode().map((item, index) => (
          <Collapse.Panel header={item.title} key={index}>
            {item.component}
          </Collapse.Panel>
        ))}
      </Collapse>
      {!isVersion && (
        <Row Row type='flex' justify='start' align='middle' className='operate_button'>
          <Button type='primary' onClick={handleEdit} disabled={value.status} style={{ marginRight: '20px' }}>
            编辑
          </Button>
          {!!value.status && <span>发布状态，无法编辑</span>}
        </Row>
      )}
    </div>
  );
};
export default InterfaceInfo;
